<template>
    <div class="amap-page-container">
        <imwe-map
            vid="amapDemo"
            :center="center"
            :zoom="zoom"
            :view-mode="viewMode"
            class="amap-demo"
        >
            <imwe-marker-cluster
                :marker-list="markers"
                v-for="(clutermarker, index) in cluterdata"
                :key="index"
                :cluster-marker-content-render="
                    clutermarker.clusterMarkerContentRender
                "
                :events="clutermarker.events"
                :extData="clutermarker.extData"
                :marker-content="clutermarker.markerContent"
            ></imwe-marker-cluster>
        </imwe-map>
    </div>
</template>

<style>
.amap-demo {
    height: 1300px !important;
}
</style>

<script>
// import imweMap from "./amap/component/imwe-map";
// import imweMarker from './amap/component/imwe-marker'
import chilemarker from "./amapplugin/component/children/marker";
import markerCluster from "./amapplugin/component/children/marker-cluster";
const exampleComponents = {
    props: ["text"],
    template: `<div>text from  parent: {{text}}</div>`
};
export default {
    data: function() {
        let self = this;

        return {
            zoom: 12,
            center: [121.59996, 31.197646],
            markers: [],
            viewMode: "3D",
            cluterdata: [
                {
                    clusterMarkerContentRender: (h, instance, context) => {
                        // console.log("amap h instance", h, instance, context);
                        return h(
                            markerCluster,
                            {
                                style: { backgroundColor: "#fff" },
                                props: { context,instance }
                            },
                        );
                    },
                    markerContent:(h, instance, context) => {
                        // console.log("amap h instance", h, instance, context);
                        return h(
                            chilemarker,
                            {
                                style: { backgroundColor: "#fff" },
                                props: { context,instance }
                            },
                        );
                    },
                    extData:{
                        a:'aaaaaaa'
                    },
                    events:{
                        click(e){
                            console.log('eventsclick',e);
                            console.log('getClustersCount',e.target.getClustersCount());
                            console.log('eventsclick',e.target.getGridSize());
                        }
                    }
                }
            ]
        };
    },

    created() {
        let markers = [];
        let index = 0;

        let basePosition = [121.59996, 31.197646];

        while (++index <= 30) {
            markers.push({
                lnglat: [basePosition[0] + 0.01 * index, basePosition[1]]
            });
        }
        console.log("markers amapapapap", markers);
        this.markers = markers;
    },

    methods: {
        _renderCluserMarker(context) {
            const count = this.markers.length;

            let factor = Math.pow(context.count / count, 1 / 18);
            let div = document.createElement("div");
            let Hue = 180 - factor * 180;
            let bgColor = "hsla(" + Hue + ",100%,50%,0.7)";
            let fontColor = "hsla(" + Hue + ",100%,20%,1)";
            let borderColor = "hsla(" + Hue + ",100%,40%,1)";
            let shadowColor = "hsla(" + Hue + ",100%,50%,1)";
            div.style.backgroundColor = bgColor;
            let size = Math.round(
                30 + Math.pow(context.count / count, 1 / 5) * 20
            );
            div.style.width = div.style.height = size + "px";
            div.style.border = "solid 1px " + borderColor;
            div.style.borderRadius = size / 2 + "px";
            div.style.boxShadow = "0 0 1px " + shadowColor;
            div.innerHTML = context.count;
            div.style.lineHeight = size + "px";
            div.style.color = fontColor;
            div.style.fontSize = "14px";
            div.style.textAlign = "center";
            context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
            context.marker.setContent(div);
        }
    }
};
// export default {
//     data() {
//         return {
//             zoom: 8,
//             center: [121.5273285, 31.21515044],
//             events:{
//                 init(o){
//                     console.log('map init',o);
//                 }
//             },
//             markers: [
//                 {
//                     position: [121.5273285, 31.21515044],
//                     events: {
//                         init(o) {
//                             console.log("marker init", o);
//                         },
//                         click: () => {
//                             alert("click marker");
//                         },
//                         dragend: e => {
//                             console.log("---event---: dragend");
//                             this.markers[0].position = [
//                                 e.lnglat.lng,
//                                 e.lnglat.lat
//                             ];
//                         }
//                     },
//                     visible: true,
//                     draggable: false,
//                     template: "<span>1</span>"
//                 }
//             ],
//             componentMarker: {
//                 position: [121.5273285, 31.21315058],
//                 contentRender: (h, instance) =>
//                     h(
//                         chilemarker,
//                         {
//                             style: { backgroundColor: "#fff" },
//                             props: { text: "father is here" }
//                         },
//                         ["xxxxxxx"]
//                     ),
//                 events: {
//                     init(o) {
//                         console.log("marker init", o);
//                     },
//                     click(e) {
//                         console.log("click", e);
//                     }
//                 }
//             }
//         };
//     },
//     created() {
//         // console.log('components map',imweMap,imweMarker);
//     }
//     // components: {
//     //     imweMap,
//     //     imweMarker
//     // }
// };
</script>
